import { Button } from '@mantine/core'
import React, { MouseEventHandler, forwardRef } from 'react'
import { IconType } from 'react-icons'
import { HiChevronDown } from 'react-icons/hi'

export type ToolbarDropdownTargetProps = {
  text: string
  icon?: IconType
  isDisabled?: boolean
  onClick?: MouseEventHandler
}

export const ToolbarDropdownTarget = forwardRef<HTMLButtonElement, ToolbarDropdownTargetProps>(
  (props: ToolbarDropdownTargetProps, ref) => {
    const TargetIcon = props.icon
    return (
      <Button
        leftIcon={TargetIcon && <TargetIcon size={16} />}
        rightIcon={<HiChevronDown />}
        size="xs"
        variant="subtle"
        disabled={props.isDisabled}
        onClick={props.onClick}
        ref={ref}
      >
        {props.text}
      </Button>
    )
  },
)
